CSS3 animations

New CSS3 animations can be used to great effect with your canvas tags. Updated: This demo was updated on the 20th June 2013 so that now instead of just one switch between charts it repeatedly switches back and forth between charts.

Another update: It now adds the CSS animation to the DIV wrapper that RGraph adds so that the DOM text is moved as well as the canvas.

This goes in the documents header:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    chart = 1;

    /**
    * Draws the blue bar chart
    */
    function drawBar1 ()
    {
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [4,5,3,8,4,9,6,5,3],
            options: {
                textAccessible: true,
                colors: ['blue'],
                labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
                strokestyle: 'rgba(0,0,0,0)',
                backgroundGridAutofitNumvlines: 9
            }
        }).draw();
    }




    /**
    * Draws the red bar chart
    */
    function drawBar2 ()
    {
        var bar2 = new RGraph.Bar({
            id: 'cvs',
            data: [4,8,5,4,8,6,3,5,2],
            options: {
                textAccessible: true,
                colors: ['red'],
                labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
                strokestyle: 'rgba(0,0,0,0)',
                backgroundGridAutofitNumvlines: 9
            }
        }).draw();
    }




    /**
    * The swap function
    */
    function swap ()
    {
        $('#cvs').parent().addClass('animated bounceOutLeft');
        setTimeout(function ()
        {
            RGraph.reset(document.getElementById("cvs"));

            if (chart == 2) {
                drawBar1();
                chart = 1;
            } else {
                drawBar2();
                chart = 2;
            }

            $('#cvs').parent().removeClass('bounceOutLeft');
            $('#cvs').parent().addClass('bounceInLeft');
        }, 750)
    }
    
    /**
    * Start with the first bar chart
    */
    drawBar1();
    chart = 1;
</script>